<template>
  <el-autocomplete
    v-model="newValue"
    :fetch-suggestions="querySearchAsync"
    placeholder="企业类型"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  props: ["value"],
  name: "depart-category-selector",
  data() {
    return {
      timeout: null
    };
  },
  computed: {
    newValue: {
      get: function() {
        return this.value;
      },
      set: function(value) {
        this.$emit("input", value);
      }
    }
  },
  create() {},
  methods: {
    querySearchAsync(queryString, cb) {
      console.log("get");
      this.$store
        .dispatch("getDepartCategories", { name: queryString })
        .then(ret => {
          var tem = ret.data.data;
          var restaurants = [];
          if (tem) {
            tem.map((item, index) => {
              restaurants.push({ value: item.name, id: item.id });
            });
          }
          cb(restaurants);
          //   var results = queryString
          //     ? restaurants.filter(this.createFilter(queryString))
          //     : restaurants;
          //   clearTimeout(this.timeout);
          //   this.timeout = setTimeout(() => {
          //     cb(results);
          //   }, 3000 * Math.random());
        });
    },
    handleSelect(item) {
      console.log(item);
      this.newValue = item.value;
      this.$emit("change", item.id, item.value);
    }
    // createFilter(queryString) {
    //   return restaurant => {
    //     return (
    //       restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
    //       0
    //     );
    //   };
    // }
  }
};
</script>

<style scoped>
</style>
